<template>
  <div>
      <div class="shownav" >
          <div v-for="(v,i) in arr" :key="i" class="shownavs" @click="fun(i)">
                <shownavs :shownavname="arr[i].name" :shownavimgurl="arr[i].imgurl"/>
          </div>
      </div>
      <div @click="fun1()">
          <img src="img/jinribiqiang.PNG" alt="">
      </div>
      
  </div>
</template>

<script>
import {getdata} from "@/api/getapi.js"
import shownavs from './shownavs.vue'
export default {
  components: { shownavs },
    data() {
        return {
            arr:[],
            arr1:[]
        }
    },
    methods: {
        fun(i){
            this.$router.push({name:"Showxiangqing",params:{xiangqing:this.arr[i]}})
        },
        fun1(){
            this.$router.push({name:"Showxiangqing",params:{xiangqing:this.arr1[0]}})
        }
    },
    mounted() {
         getdata("/data/list").then((ok)=>{
            console.log(ok);
            this.arr=ok.data.arr3
            this.arr1=ok.data.arr8
            
        })
    },
}
</script>

<style scoped>
    .shownav{
        width: 100%;
        display: flex;
    }
    .shownavs{
        width: 50px;
        flex: 1;
        text-align: center;
        font-size: 12px;
    }
</style>